<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/font.css">
		<link rel="stylesheet" href="/static/css/weadmin.css">
		<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      #infoForm{margin-top: 30px;}
    </style>
</head>
<body>
  <div class="layui-row">
    <div class="layui-col-md6 layui-col-md-offset4">
      <form id="infoForm" class="layui-form" lay-filter="editUser">
        <div class="layui-form-item">
          <label class="layui-form-label">头像</label>
          <div class="layui-input-block">
            <img id="headerImg" <% if(user.imgheader){ %>src="<%- user.imgheader %>" <% }else{ %> src="/upload/0.jpg" <% } %> width="100" height="100" alt="">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"><span class="we-red">*</span>用户名</label>
          <div class="layui-input-inline">
            <input type="text" name="username" required lay-verify="required|username" placeholder="请输入用户名" autocomplete="off"
              class="layui-input"value="<%-user.username %>" >
          </div>
          <div class="layui-form-mid layui-word-aux"><span class="we-red">*</span>用户名不含下划线等特殊字符且不能全为数字</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">手机号</label>
          <div class="layui-input-inline">
            <input type="text" name="mobile" required lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off"
              class="layui-input" value="<%- user.mobile %>">
          </div>
          <div class="layui-form-mid layui-word-aux"><span class="we-red">*</span>请正确输入手机号</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-inline">
            <input type="text" name="email" required lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off"
              class="layui-input" value="<%-user.email %>">
          </div>
          <div class="layui-form-mid layui-word-aux"><span class="we-red">*</span>请正确输入邮箱</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required|pass" placeholder="请输入新的密码" autocomplete="off"
              class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux"><span class="we-red">*</span>请在此处修改原始密码</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">角色</label>
          <div class="layui-input-block">
            <% for(let i=0;i<roles.length;i++){ %>
              <input type="radio" <% if(user.roleid===(i+1)){ %> checked <% } %> name="role" value="<%- i+1 %>" title="<%-roles[i].rolename %>">
            <% } %>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input type="radio" name="sex" value="0" title="男" <% if(user.sex=="0"){ %> checked <% } %>>
            <input type="radio" name="sex" value="1" title="女" <% if(user.sex=="1"){ %> checked <% } %>>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">上传头像</label>
          <input type="hidden" name="imgheader" >
          <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadImg">
              <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">个人简介</label>
          <div class="layui-input-block">
            <textarea name="desc" placeholder="请输入内容" class="layui-textarea" ><%- user.userdesc %></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="edit">修改</button>
            <!-- <button type="reset" class="layui-btn layui-btn-primary reset">重置</button> -->
          </div>
        </div>
      </form>
    </div>
   
  </div>
    

    <script>
     	layui.extend({
				admin: '{/}/static/js/admin'
			});
      layui.use(['form','layer','admin','upload'], function(){
	      var form = layui.form,
	      	admin = layui.admin,
	      	layer = layui.layer,
          $ = layui.jquery,
          upload = layui.upload;
          //自定义验证规则
          form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                            return '用户名不能有特殊字符';
                        }
                        if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                            return '用户名首尾不能出现下划线\'_\'';
                        }
                        if (/^\d+\d+\d$/.test(value)) {
                            return '用户名不能全为数字';
                        }
                    }

            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            
          });
         
          //图片上传
          upload.render({//默认post请求
            elem: '#uploadImg' //绑定元素
            ,url: '/admin/user/userInfo/selfimgupload' //上传接口
            , field:"uploadImg" 
            ,done: function(res){
              //上传完毕回调
              layer.alert('上传成功')
              $('#headerImg').attr('src',res.imgUrl)
              $('input[name=imgheader]').val(res.imgUrl)
            }
            ,error: function(err){
              console.log(err);
              
            }
          });
          //监听提交
          form.on('submit(edit)', function(data){
            console.log(data);
            $.ajax({
              url:'/admin/user/userInfo/edit',
              data:data.field,
              method:'post'
            }).then((res)=>{
              if(res.msg=="ok"){
                layer.alert("修改成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
              }
            })
            
            return false;
          });
          
        });
    </script>
</body>
</html>